<template>
  <WaterMark></WaterMark>
  <el-container>

    <el-aside width="200px" height="100%">
      <LeftMenu></LeftMenu>
    </el-aside>


    <el-container>
      <el-header>
        <el-row>
          <el-col :span="24">
            <el-popover placement="bottom" :width="220" trigger="click">
              <template #reference>
                <el-button class="changeTheme" style="margin-right: 16px">切换主题</el-button>
              </template>
              <el-space size="small">
                <div v-for="(item, i) in colorArray" :key="i">
                  <el-button :style="{ backgroundColor: item }" @click="changeThem(item)"></el-button>
                </div>
              </el-space>
            </el-popover>
          </el-col>
        </el-row>
      </el-header>

      <!-- <el-divider /> -->

      <el-main>
        <router-view />
      </el-main>

      <!-- <el-divider /> -->
      <!-- <el-footer>
        <Footer></Footer>
      </el-footer> -->
    </el-container>

  </el-container>
</template>

<script setup>
import { ref, onMounted } from "vue";
import LeftMenu from "../left/left.vue"; //left menu
import Footer from "../footer/footer.vue"; //Footer
import WaterMark from "../watermark/watermark.vue"; //添加水印

const colorArray = ["#67C23A", "#E6A23C", "#F56C6C", "#409EFF",'#626aef'];
const currentBgColor = ref(colorArray[0]);

onMounted(() => { });

function changeThem(bgColor) {
  document.documentElement.setAttribute("theme", bgColor);
}
</script>

<style scope lang="scss">
.changeTheme {
  width: 120px;
  height: 35px;
  line-height: 33px;
  border-radius: 5px;
  box-shadow: 5px 10px 30px rgba(0, 0, 0, 0.2),
    -5px -10px 30px rgba(255, 255, 255, 1);
  transition: all 0.2s ease-in-out;
  margin-top:12px;
}

.changeTheme:active {
  color: #fff;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(255, 255, 255, 0.8),
    inset 15px 15px 25px rgba(0, 0, 0, 0.2),
    inset -15px -15px 25px rgba(255, 255, 255, 1);
}
</style>
  



